<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 50%;
            height: 100vh;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        body>div {
            margin: 2px;
            color: red;
            background-color: black;
        }

        .div1 {
            font-size: 32px;
            font-family: arial, 楷体;
        }

        .div2 {
            font-size: 20px;
            font-family: monospace;
        }

        .div3>div:nth-child(1) {
            font-style: italic;
        }

        .div3>div:nth-child(2) {
            font-style: oblique;
        }

        .div4 {
            font-weight: bold;
        }

        .div5 {
            font: bold italic 24px "楷体";
        }

        /* 通过font-size加载服务器上的字体 */
        @font-face {
            font-family: 'my-font-name';
            src: url('./font/my-font-name.ttf');
        }
    </style>
</head>

<body>
    <div>
        浏览器默认font-size为16px,字体根据浏览器不同默认使用的也不同
    </div>
    <div class="div1">
        现在设置为32px，楷体。
        浏览器可使用计算机中存有的字体
    </div>
    <div>
        字体分为五大类：
        <table>
            <tr>
                <td>serif</td>
                <td>衬线字体</td>
            </tr>
            <tr>
                <td>sans-serif</td>
                <td>非衬线字体</td>
            </tr>
            <tr>
                <td>monospace</td>
                <td>等宽字体</td>
            </tr>
            <tr>
                <td>cursive</td>
                <td>草书字体</td>
            </tr>
            <tr>
                <td>fantasy</td>
                <td>虚幻字体</td>
            </tr>
        </table>
        <div class="div2">
            可以设置字体为大分类，浏览器会自动选择一种匹配的字体，不同的浏览器会有不同的效果
            <br>
            一般用来设置为字体最后一个选择，兜底
        </div>
    </div>
    <div class="div3">
        <div>
            font-style: italic;斜体
        </div>
        <div>
            font-style: oblique;倾斜
        </div>
        这俩基本长一个样
    </div>
    <div class="div4">
        font-weight: bold;字体加粗
        <br>
        bolder:更粗。lighter:更细。(基本没什么用)
        <br>
        也可设置100-900之间的九个值，
        但用户计算机中没有这么多级别的字体，
        因此往往我们无法实现想要的效果(基本没什么用)
    </div>
    <div class="div5">
        font: bold italic 24px "楷体";
        <br>
        字体样式可以用font统一设定，其中字体大小、字体为必填项，且字体大小必须为倒数第二个，字体必须为最后一个，否则样式将全不生效。简写方式性能更好。
    </div>
</body>

</html>